﻿@namespace Masa.Blazor.Docs.Components
@inherits NextTickComponentBase

<MThemeProvider Theme="@Theme">
    @if (_rendered)
    {
        <AppSheet Class="m-example">
            <MRow NoGutters>
                <MCol Cols="12" Md="@(HasRightOptions ? 8 : 12)">
                    <MResponsive Class="d-flex" Height="44">
                        @if (_toggleParameters.Any())
                        {
                            <MSlideGroup ActiveClass="primary--text" Mandatory Value="_toggleValue"
                                         ValueChanged="ToggleValueChanged">
                                @foreach (var item in _toggleParameters)
                                {
                                    <MSlideItem @key="item" Value="@item.Key">
                                        <MButton IsActive="@context.Active"
                                                 Depressed
                                                 Height="44"
                                                 Text
                                                 Tile
                                                 OnClick="() => context.Toggle()">
                                            @string.Join(" ", GeneratedRegexes.SingleCamelCase().Split(item.Key))
                                        </MButton>
                                    </MSlideItem>
                                }
                            </MSlideGroup>
                        }
                    </MResponsive>

                    <AppDivider/>

                    <MSheet
                        Class="overflow-y-auto fill-height d-flex align-center justify-center pa-14 m-example__comp"
                        Color="surface"
                        MinHeight="400"
                        MaxHeight="400"
                        Rounded="@("t")">
                        <MErrorHandler>
                            <DynamicComponent Type="@_type" Parameters="@Parameters"></DynamicComponent>
                        </MErrorHandler>
                    </MSheet>
                </MCol>

                @if (HasRightOptions)
                {
                    <MCol Cols="12" Md="4">
                        <div class="d-flex align-center">
                            <AppDivider Vertical/>

                            <div class="d-flex align-center" style="height: 44px">
                                <div class="text-h6 font-weight-medium text-undefined ml-4">Options</div>
                            </div>
                        </div>

                        <AppDivider/>

                        <div class="d-flex">
                            <AppDivider Vertical/>

                            <MResponsive Class="overflow-y-auto pa-3"
                                         Height="@("100%")"
                                         MaxHeight="400"
                                         MinHeight="400">
                                @foreach (var (item, i) in _checkboxParameters.Select((item, i) => (item, i)))
                                {
                                    <MCheckbox @key="item"
                                               @bind-Value="@item.Value.Value"
                                               Label="@item.Key"
                                               Class="@(i == 0 ? "mt-0" : "")"
                                               Dense
                                               HideDetails="true"
                                               Inset>
                                    </MCheckbox>
                                }

                                @foreach (var item in _sliderParameters)
                                {
                                    <MSlider @key="item"
                                             @bind-Value="@item.Value.Value"
                                             Label="@item.Key"
                                             Max="@item.Value.Max"
                                             Min="@item.Value.Min"
                                             Step="@item.Value.Step"
                                             Class="my-2"
                                             HideDetails="true">
                                    </MSlider>
                                }

                                @foreach (var item in _selectParameters)
                                {
                                    <MSelect Items="@item.Value.Items"
                                             @bind-Value="@item.Value.Value"
                                             ItemValue="i => i"
                                             ItemText="i => i"
                                             Label="@item.Key"
                                             Class="my-2"
                                             Clearable
                                             Dense
                                             Filled
                                             HideDetails="true">
                                    </MSelect>
                                }
                            </MResponsive>
                        </div>
                    </MCol>
                }

                <MCol Cols="12">
                    <AppDivider/>
                </MCol>
                <MCol Cols="12">
                    <Markup RoundedTop0 Code="@SourceCode" Language="razor" IsUsage></Markup>
                </MCol>
            </MRow>
        </AppSheet>
    }
    else
    {
        <MSkeletonLoader MinHeight="490" MaxHeight="490" Type="card"></MSkeletonLoader>
    }
</MThemeProvider>
